<script lang="ts">
import { computed, defineComponent } from "vue";

export default defineComponent({
  props: {
    modelValue: { type: Number, required: true },
    rate: { type: Number, default: 100 },
    color: { type: String, default: "#67ce99" },
    layerColor: { type: String, default: "#dddddd" },
  },
  setup(props) {
    const isHalf = computed(() => {
      return props.modelValue >= props.rate / 2;
    });

    const leftTransform = computed(() => {
      return isHalf.value
        ? `rotate(${getRotateDeg(props.modelValue - props.rate / 2)})`
        : "";
    });

    const rightTransform = computed(() => {
      return isHalf.value ? "" : `rotate(${getRotateDeg(props.modelValue)})`;
    });

    const getRotateDeg = (value: number) => {
      const progress = Math.min(0.5, value / props.rate);
      return `${360 * progress}deg`;
    };
    return { isHalf, leftTransform, rightTransform };
  },
});
</script>

<template>
  <div class="progress-circle" :style="{ backgroundColor: color }">
    <div
      class="progress-circle-left"
      :style="{ backgroundColor: layerColor, transform: leftTransform }"
    ></div>
    <div
      class="progress-circle-right"
      :style="{
        backgroundColor: isHalf ? color : layerColor,
        transform: rightTransform,
      }"
    ></div>
    <div class="progress-circle-slot">
      <slot />
    </div>
  </div>
</template>

<style lang="less">
.progress-circle {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 1em;
  height: 1em;
  border-radius: 50%;

  .progress-circle-left,
  .progress-circle-right {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
    clip: rect(0, 0.5em, auto, 0);
    border-radius: 50%;
  }

  .progress-circle-right {
    clip: rect(0, auto, auto, 0.5em);
  }

  .progress-circle-slot {
    position: relative;
    border-radius: 50%;
    background-color: #ffffff;
    overflow: hidden;
  }
}
</style>
